<template>
	<view>
		<view class="bottom-share padding-bottom-sm" >
		  <view class="bottom">
		  	<image style="width: 26rpx;height: 26rpx;margin-right: 10rpx;" src="./images/share.png" mode="aspectFill"
		  	 lazy-load></image>
		  	<view class="flex align-center justify-center text-sm">
		  		分享
		  		<view class="animate-box text-sm">
		  			赚
		  			<text class="before text-sm" :style="{'animation-delay': index*0.25 + 's'}">赚</text>
		  			<text class="after text-sm" :style="{'animation-delay': index*0.25 + 's'}">赚</text>
		  		</view>
		  		￥{{info.share_award_money}}
		  	</view>
		  </view>
		  <!-- #ifdef MP-WEIXIN -->
		  <button class="share-btn" open-type="share" :data-info="info" @click.stop></button>
		  <!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default () {
					return {}
				},
			},
			index: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.bottom-share{
	    position: relative;
			width: 320rpx;
			height: 44rpx;
	    .share-btn{
	      width: 100%;
	      height: 100%;
	      position: absolute;
	      top: 0;
	      right: 0;
	      opacity: 0;
	
	    }
	  }
	  .bottom {
	    	// margin: 0 20rpx;
				padding-left: 20rpx;
	    	height: 38rpx;
	    	background-image: url($IMG_BASE_URL + 'goods/fire.png');
	    	// background-size: cover;
				background-size: 320rpx 44rpx;
	    	font-weight: bold;
	    	font-size: 22rpx;
	    	color: #FFFFFF;
	    	line-height: 38rpx;
	    	text-align: center;
	    	display: flex;
	    	align-items: center;
	    	// justify-content: center;
	    	overflow: hidden;}
	  .animate-box {
	    		display: inline-block;
	    		position: relative;
	    		color: #FF9507;
	
	    		.before {
	    			position: absolute;
	    			top: 0;
	    			left: 0;
	    			color: #FFFFFF;
	    			animation: animateTop 2s ease-in-out infinite;
	    		}
	
	    		.after {
	    			position: absolute;
	    			top: 64rpx;
	    			left: 0;
	    			color: #FFFFFFff;
	    			animation: animateBot 2s ease-in-out infinite;
	    		}
	    	}
	
	  @keyframes animateTop {
	  	0% {
	  		top: 0rpx
	  	}
	
	  	75% {
	  		top: 0rpx
	  	}
	
	  	100% {
	  		top: -64rpx
	  	}
	  }
	
	  @keyframes animateBot {
	  	0% {
	  		top: 64rpx
	  	}
	
	  	75% {
	  		top: 64rpx
	  	}
	
	  	100% {
	  		top: 0px
	  	}
	  }
	  .item-goods-label {
	    background-color: $theme;
	    padding: 2rpx 8rpx;
	    color: #ffffff;
	    font-size: 24rpx;
	    border-radius: 6rpx;
	    margin-right: 9rpx;
	
	  }
		.box-size-xs-24 {
			width: 48rpx;
			height: 48rpx;
		}
</style>
